<template>
  <div class="house-list-container">
    <!-- 顶部搜索栏 -->
    <div class="search-container">
      <div class="nav-header">
        <div class="nav-container">
  <div class="nav-left">
    <h2 class="logo">房屋租赁系统</h2>
    <el-menu mode="horizontal" :router="true" class="nav-menu">
      <el-menu-item index="/house">首页</el-menu-item>
      <el-menu-item index="/about">关于我们</el-menu-item>
      <el-menu-item index="/contact">联系方式</el-menu-item>
      <!--新增导航栏-->
      <el-menu-item index="/aichat">AI聊天</el-menu-item>
      <el-menu-item @click="showFeedbackDialog">提出意见</el-menu-item>
    </el-menu>
  </div>
  <div class="nav-right">
    <el-button type="primary" @click="$router.push('/user')">个人中心</el-button>
  </div>
</div>
  </div>
      <div class="search-box">
        <h1 class="page-title">寻找理想的住所</h1>
        <div class="search-input-container">
          <el-input
            v-model="searchQuery"
            placeholder="输入关键词搜索房源"
            class="search-input"
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="searchHouses" :loading="loading" class="search-button">
            搜索
          </el-button>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-container">
      <el-card shadow="hover" class="filter-card">
        <div class="filter-row">
          <div class="filter-label">区域：</div>
          <div class="filter-options">
            <el-radio-group v-model="filters.district" @change="filterHouses" size="small">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="朝阳区">朝阳区</el-radio-button>
              <el-radio-button label="海淀区">海淀区</el-radio-button>
              <el-radio-button label="东城区">东城区</el-radio-button>
              <el-radio-button label="西城区">西城区</el-radio-button>
              <el-radio-button label="丰台区">丰台区</el-radio-button>
              <el-radio-button label="昌平区">昌平区</el-radio-button>
              <el-radio-button label="通州区">通州区</el-radio-button>
              <el-radio-button label="石景山区">石景山区</el-radio-button>
              <el-radio-button label="大兴区">大兴区</el-radio-button>
              <el-radio-button label="顺义区">顺义区</el-radio-button>
              <el-radio-button label="房山区">房山区</el-radio-button>
              <el-radio-button label="怀柔区">怀柔区</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="filter-row">
          <div class="filter-label">租金：</div>
          <div class="filter-options">
            <el-radio-group v-model="filters.priceRange" @change="filterHouses" size="small">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="0-3000">3000元以下</el-radio-button>
              <el-radio-button label="3000-5000">3000-5000元</el-radio-button>
              <el-radio-button label="5000-8000">5000-8000元</el-radio-button>
              <el-radio-button label="8000-12000">8000-12000元</el-radio-button>
              <el-radio-button label="12000-">12000元以上</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="filter-row">
          <div class="filter-label">户型：</div>
          <div class="filter-options">
            <!-- 室选择 -->
            <el-select v-model="filters.roomCount" placeholder="室" @change="filterHouses" size="small" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="1室" value="1室" />
              <el-option label="2室" value="2室" />
              <el-option label="3室" value="3室" />
              <el-option label="4室" value="4室" />
              <el-option label="5室及以上" value="5室" />
            </el-select>
            
            <!-- 厅选择 -->
            <el-select v-model="filters.hallCount" placeholder="厅" @change="filterHouses" size="small" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="1厅" value="1厅" />
              <el-option label="2厅" value="2厅" />
              <el-option label="3厅及以上" value="3厅" />
            </el-select>
            
            <!-- 卫选择 -->
            <el-select v-model="filters.bathCount" placeholder="卫" @change="filterHouses" size="small" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="1卫" value="1卫" />
              <el-option label="2卫" value="2卫" />
              <el-option label="3卫及以上" value="3卫" />
            </el-select>
          </div>
        </div>

        <div class="filter-row">
          <div class="filter-label">方式：</div>
          <div class="filter-options">
            <el-radio-group v-model="filters.rentalMethod" @change="filterHouses" size="small">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="整租">整租</el-radio-button>
              <el-radio-button label="合租">合租</el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="filter-row">
          <div class="filter-label">更多：</div>
          <div class="filter-options">
            <el-select v-model="filters.orientation" placeholder="朝向" @change="filterHouses" size="small" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="东" value="东" />
              <el-option label="南" value="南" />
              <el-option label="西" value="西" />
              <el-option label="北" value="北" />
            </el-select>
            
            <el-select v-model="filters.decoration" placeholder="装修" @change="filterHouses" size="small" class="filter-select">
              <el-option label="全部" value="" />
              <el-option label="毛坯" value="毛坯" />
              <el-option label="简装" value="简装" />
              <el-option label="精装" value="精装" />
            </el-select>
            
            <!-- 添加排序下拉框 -->
            <el-select v-model="sortOption" placeholder="排序" @change="filterHouses" size="small" class="filter-select">
              <el-option label="默认排序" value="" />
              <el-option label="价格从低到高" value="price_asc" />
              <el-option label="价格从高到低" value="price_desc" />
              <el-option label="面积从小到大" value="area_asc" />
              <el-option label="面积从大到小" value="area_desc" />
            </el-select>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 房屋列表 -->
    <div class="house-list">
      <transition-group name="house-fade" tag="div" class="house-grid">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="house in houses" :key="house.house_id" class="house-col">
          <el-card 
            shadow="hover" 
            class="house-card" 
            @click="viewHouseDetails(house.house_id)"
            :body-style="{ padding: '0px' }"
          >
            <div class="house-image">
              <el-image 
                :src="formatImageUrl(house.photo_url)" 
                fit="cover"
              >
                <template #error>
                  <div class="image-placeholder">
                    <el-icon><Picture /></el-icon>
                    <span>暂无图片</span>
                  </div>
                </template>
              </el-image>
              <div class="house-price">{{ house.monthly_rent }}元/月</div>
              <div class="house-badge" v-if="house.status === '闲置'">可租</div>
              <!--优化出租中-->
              <div class="house-badge rented" v-if="house.status === '出租中'">已出租</div>
            </div>
            <div class="house-info">
              <h3 class="house-title">{{ house.description || '优质房源' }}</h3>
              <div class="house-tags">
                <el-tag size="small" type="info" effect="plain">{{ house.house_type }}</el-tag>
                <el-tag size="small" type="success" effect="plain">{{ house.floor_area }}㎡</el-tag>
                <el-tag size="small" type="warning" effect="plain">{{ house.orientation }}</el-tag>
                <el-tag size="small" type="danger" effect="plain">{{ house.rental_method }}</el-tag>
              </div>
              <div class="house-address">
                <el-icon><Location /></el-icon>
                <span>{{ house.district }} {{ house.address }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </transition-group>

      <!-- 加载更多 -->
      <div class="load-more" v-if="houses.length > 0 && hasMore">
        <el-button :loading="loading" @click="loadMore" type="primary" plain>加载更多</el-button>
      </div>

      <!-- 无数据提示 -->
      <el-empty v-if="houses.length === 0" description="暂无符合条件的房源" :image-size="200"></el-empty>
      <div class="back-to-top" :class="{ show: showBackToTop }" @click="scrollToTop">
      <el-icon><ArrowUp /></el-icon>
    </div>
    </div>
    <!-- 添加意见反馈弹窗 -->
    <el-dialog
      v-model="feedbackDialogVisible"
      title="提出意见"
      width="500px"
      center
    >
      <el-form :model="feedbackForm" label-position="top">
        <el-form-item label="意见内容" prop="content">
          <el-input
            v-model="feedbackForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入您的意见或建议"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="feedbackDialogVisible = false">取消（Esc）</el-button>
          <el-button type="primary" @click="submitFeedback">提交(Q)</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { Search, Location, Picture, ArrowUp } from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const router = useRouter()
const searchQuery = ref('')
const houses = ref([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(12)
const hasMore = ref(true)
const feedbackDialogVisible = ref(false)
const feedbackForm = ref({
  content: ''
})
// 删除 sortBy 变量

// 添加排序选项
const sortOption = ref('')

// 筛选条件
const filters = reactive({
  district: '',
  priceRange: '',
  roomCount: '',
  hallCount: '',
  bathCount: '',
  rentalMethod: '',
  orientation: '',
  decoration: ''
})

// 格式化图片URL
const formatImageUrl = (url) => {
  if (!url) return 'https://via.placeholder.com/300x200?text=暂无图片'
  
  // 如果是完整路径，提取文件名
  if (url.includes('/')) {
    const parts = url.split('/')
    const filename = parts[parts.length - 1]
    return `http://127.0.0.1:5000/static/house-img/${filename}`
  }
  
  // 如果相对路径或只有文件名
  if (url.includes('house-img')) {
    return `http://127.0.0.1:5000/${url}`
  }
  
  return `http://127.0.0.1:5000/static/house-img/${url}`
}

// 获取房源列表
const fetchHouses = async (isLoadMore = false) => {
  if (loading.value) return
  if (!isLoadMore) {
    page.value = 1
    houses.value = []
  }
  
  loading.value = true
  
  try {
    // 构建查询参数
    const params = {
      keyword: searchQuery.value,
      page: page.value,
      page_size: pageSize.value
    }
    
    // 添加筛选条件
    if (filters.district) params.district = filters.district
    if (filters.rentalMethod) params.rental_method = filters.rentalMethod
    if (filters.orientation) params.orientation = filters.orientation
    if (filters.decoration) params.decoration = filters.decoration
    
    // 处理户型筛选 - 组合室厅卫为完整户型
    let houseType = '';
    if (filters.roomCount) houseType += filters.roomCount;
    if (filters.hallCount) houseType += filters.hallCount;
    if (filters.bathCount) houseType += filters.bathCount;
    
    if (houseType) {
      params.house_type = houseType;
      console.log('发送户型参数:', params.house_type); // 调试日志
    }
    
    // 处理价格范围
    if (filters.priceRange) {
      const [min, max] = filters.priceRange.split('-')
      if (min) params.min_rent = min
      if (max) params.max_rent = max
    }
    
     // 添加排序参数
     if (sortOption.value) {
      const [field, order] = sortOption.value.split('_')
      params.sort_by = field // 'price' 或 'area'
      params.order = order   // 'asc' 或 'desc'
      console.log('发送排序参数:', params.sort_by, params.order) // 调试日志
    }
    
    // 发送请求
    const response = await axios.get('http://127.0.0.1:5000/api/houses/housesList', { params })
    
    // 处理响应
    if (response.data && Array.isArray(response.data)) {
      if (isLoadMore) {
        houses.value = [...houses.value, ...response.data]
      } else {
        houses.value = response.data
      }
      
      // 判断是否还有更多数据
      hasMore.value = response.data.length === pageSize.value
      
      // 如果是加载更多，页码加1
      if (isLoadMore && response.data.length > 0) {
        page.value++
      }
    } else {
      ElMessage.warning('获取房源数据格式不正确')
      houses.value = []
      hasMore.value = false
    }
  } catch (error) {
    console.error('获取房源列表详细错误信息:', error);
    if (error.response) {
      console.error('错误响应数据:', error.response.data);
      console.error('错误状态码:', error.response.status);
      console.error('错误头信息:', error.response.headers);
    }
  } finally {
    loading.value = false
  }
}

// 搜索房源
const searchHouses = () => {
  fetchHouses()
}

// 筛选房源
const filterHouses = () => {
  fetchHouses()
}

// 加载更多
const loadMore = () => {
  if (hasMore.value) {
    fetchHouses(true)
  }
}

// 查看房源详情
const viewHouseDetails = (houseId) => {
  router.push(`/house/${houseId}`)
}

// 初始化加载
onMounted(() => {
  // 检查是否从详情页跳转过来
  const fromDetails = localStorage.getItem('fromDetails')
  
  if (fromDetails === 'true') {
    // 清除标志
    localStorage.removeItem('fromDetails')
    
    // 获取存储的筛选条件
    const district = localStorage.getItem('filterDistrict')
    const priceRange = localStorage.getItem('filterPriceRange')
    const keyword = localStorage.getItem('filterKeyword')
    
    // 应用筛选条件
    if (district) {
      filters.district = district
      localStorage.removeItem('filterDistrict')
    }
    
    if (priceRange) {
      filters.priceRange = priceRange
      localStorage.removeItem('filterPriceRange')
    }
    
    if (keyword) {
      searchQuery.value = keyword
      localStorage.removeItem('filterKeyword')
    }
  }
  
  // 加载房源列表
  fetchHouses()
  
  // 添加滚动监听
  window.addEventListener('scroll', handleScroll)
  
  // 添加全局键盘事件监听
  window.addEventListener('keydown', handleKeydown)
})

// 组件卸载时移除监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  window.removeEventListener('keydown', handleKeydown)
})

// 返回顶部按钮显示状态
const showBackToTop = ref(false)

// 滚动到顶部
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// 处理滚动事件
const handleScroll = () => {
  const navHeader = document.querySelector('.nav-header')
  if (!navHeader) return
  
  // 当滚动超过100px时，添加fixed类
  if (window.scrollY > 230) {
    navHeader.classList.add('fixed')
    showBackToTop.value = true  // 显示返回顶部按钮
  } else {
    navHeader.classList.remove('fixed')
    showBackToTop.value = false  // 隐藏返回顶部按钮
  }
}

function showFeedbackDialog() {
  feedbackDialogVisible.value = true
  feedbackForm.value.content = ''
}

// 全局键盘事件处理函数
const handleKeydown = (e) => {
  // 处理Ctrl+Q快捷键
  if (e.ctrlKey && e.key === 'q') {
    e.preventDefault() // 阻止默认行为
    if (feedbackDialogVisible.value) {
      submitFeedback()
    }
  }
}

// 提交意见
async function submitFeedback() {
  if (!feedbackForm.value.content.trim()) {
    ElMessage.warning('请输入意见内容')
    return
  }
  try {
    await axios.post('/consultation/create', {
      user_id: localStorage.getItem('userId'),
      content: feedbackForm.value.content
    })
    ElMessage.success('意见提交成功')
    feedbackDialogVisible.value = false
    // if (activeTab === 'feedbacks') {
    //   getFeedbackList()
    // }
  } catch (error) {
    ElMessage.error('提交失败：' + error.message)
  }
}
</script>

<style scoped>
/* 导航栏容器 */
.search-box {
  padding-top: 70px;  /* 原来是50px，向下移动20px，可根据需要调整 */
}
.nav-header {
  padding: 0;
  margin-bottom: 0;
  position: absolute;  /* 初始状态保持绝对定位 */
  top: 10px;
  left: 0;
  right: 0;
  z-index: 1000;  /* 提高层级确保显示在最上层 */
  transition: all 0.3s ease; /* 添加过渡效果使变化更平滑 */
}

.nav-header.fixed {
  position: fixed;
  top: 0;
  background: rgba(25, 118, 210, 0.85);  /* 半透明背景 */
  backdrop-filter: blur(10px);  /* 背景模糊效果，创建磨砂质感 */
  -webkit-backdrop-filter: blur(10px);  /* Safari 浏览器兼容 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);  /* 更柔和的阴影 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);  /* 微弱的边框 */
}
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;  /* 与容器保持一致的内边距 */
  height: 40px;    /* 减小导航栏高度 */
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.logo {
  color: white;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  white-space: nowrap;
}

.nav-menu {
  background: transparent !important;
  border: none;
}

:deep(.el-menu--horizontal > .el-menu-item) {
  height: 50px !important;
  line-height: 50px !important;
  color: rgba(255, 255, 255, 0.8);
  padding: 0 16px;
  font-size: 14px;
  border-bottom: none !important;
  transition: all 0.3s ease;
}

:deep(.el-menu--horizontal > .el-menu-item:hover),
:deep(.el-menu--horizontal > .el-menu-item.is-active) {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.1);
  /* 不要再设置高度和行高，保持和上面一致 */
}


/* 精准控制 el-menu 溢出菜单“...”的高度和行高 */
:deep(.el-sub-menu.el-menu--overflow) {
  height: 36px !important;
  line-height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 !important;
}
:deep(.el-sub-menu.el-menu--overflow > .el-sub-menu__title) {
  height: 36px !important;
  line-height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  display: flex;
  align-items: center;
}
:deep(.el-sub-menu.el-menu--overflow .el-icon) {
  font-size: 18px !important;
  vertical-align: middle;
}
/* 彻底隐藏 el-menu 的溢出菜单（...）及其弹出内容 */
:deep(.el-menu--overflow) {
  display: none !important;
}
:deep(.el-menu--popup) {
  display: none !important;
}
.nav-right {
  display: flex;
  align-items: center;
}

.nav-right .el-button {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
}

.nav-right .el-button:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
}
.house-list-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif;
}

.search-container {
  margin-bottom: 30px;
  background: linear-gradient(135deg, #1976d2, #64b5f6);
  padding: 20px 30px 40px;  /* 减小顶部内边距 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(25, 118, 210, 0.2);
  text-align: center;
  position: relative;  /* 添加相对定位 */
  height:240px;
}

.page-title {
  color: white;
  font-size: 2.2rem;
  margin-bottom: 20px;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.search-input-container {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  height: 45px; /* 增高 */
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  transition: box-shadow 0.3s;
}
.search-input-container:focus-within {
  box-shadow: 0 8px 24px rgba(25, 118, 210, 0.18);
}

.search-input {
  flex: 1;
  border-radius: 10px 0 0 10px;
  font-size: 18px;
  height: 100%;
  padding-left: 16px;
  border: none;
  outline: none;
  transition: box-shadow 0.3s;
}
.search-input:focus {
  box-shadow: 0 0 0 2px #1976d2;
  background: #fff;
}

.search-button {
  border-radius: 0 10px 10px 0;
  font-weight: 600;
  padding: 0 32px;
  font-size: 18px;
  height: 100%;
  background: #1976d2;
  color: #fff;
  border: none;
  transition: background 0.3s, box-shadow 0.3s;
}
.search-button:hover {
  background: #1565c0;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.18);
}

/* 筛选栏字体放大与交互增强 */
.filter-label {
  width: 70px;
  font-weight: bold;
  color: #1976d2;
  font-size: 18px;
  transition: color 0.2s;
}
.filter-select,
:deep(.el-radio),
:deep(.el-checkbox) {
  font-size: 16px !important;
  transition: color 0.2s, background 0.2s;
}
:deep(.el-radio__input.is-checked + .el-radio__label),
:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
  color: #1976d2 !important;
  font-weight: bold;
}
:deep(.el-radio:hover),
:deep(.el-checkbox:hover) {
  color: #1565c0 !important;
  background: rgba(25, 118, 210, 0.08);
  border-radius: 6px;
}

/* 房源卡片动态效果 */
.house-card {
  margin-bottom: 16px;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  overflow: hidden;
  border-radius: 16px;
  border: none;
  height: 100%;
  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.08);
}
.house-card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 32px rgba(25, 118, 210, 0.18);
}

/* 加载更多按钮动效 */
.load-more .el-button {
  padding: 14px 36px;
  font-size: 18px;
  border-radius: 10px;
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.load-more .el-button:hover {
  background: #1565c0;
  box-shadow: 0 8px 24px rgba(25, 118, 210, 0.18);
  transform: translateY(-3px) scale(1.04);
}

/* 返回顶部按钮动效 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(25, 118, 210, 0.85);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: background 0.3s, box-shadow 0.3s, transform 0.2s;
}
.back-to-top:hover {
  background-color: #1565c0;
  box-shadow: 0 12px 32px rgba(25, 118, 210, 0.25);
  transform: translateY(-8px) scale(1.08);
}

/* 其它细节美化 */
.page-title {
  font-size: 2.6rem;
  letter-spacing: 2px;
  margin-bottom: 32px;
  font-weight: 700;
  text-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.filter-card {
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(25, 118, 210, 0.07) !important;
  padding: 12px 18px;
  background: rgba(255,255,255,0.95);
  transition: box-shadow 0.3s;
}
.filter-card:hover {
  box-shadow: 0 12px 32px rgba(25, 118, 210, 0.13) !important;
}

.filter-row {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  padding: 5px 0;
}

.filter-label {
  width: 60px;
  font-weight: bold;
  color: #1976d2;
  font-size: 14px;
}

.filter-options {
  flex: 1;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 调整户型选择器样式 */
.filter-select {
  width: 80px; /* 减小宽度以适应三个选择器 */
}

.house-list {
  margin-top: 20px;
}

.house-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.house-col {
  padding: 10px;
  transition: all 0.5s;
}

.house-fade-enter-active, .house-fade-leave-active {
  transition: all 0.5s;
}

.house-fade-enter-from, .house-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.house-card {
  margin-bottom: 10px;
  transition: all 0.3s;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  border: none;
  height: 100%;
}

.house-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(25, 118, 210, 0.15) !important;
}

.house-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.house-image .el-image {
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
}

.house-card:hover .house-image .el-image {
  transform: scale(1.08);
}

.house-price {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(25, 118, 210, 0.9);
  color: white;
  padding: 8px 15px;
  font-weight: bold;
  border-top-left-radius: 10px;
  font-size: 16px;
  box-shadow: -2px -2px 10px rgba(0, 0, 0, 0.1);
}

.house-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: rgba(76, 175, 80, 0.9);
  color: white;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 20px;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.house-badge.rented {
  background-color: #f56c6c;
}
.house-info {
  padding: 18px;
  background: white;
}

.house-title {
  margin: 0 0 12px;
  font-size: 17px;
  color: #303133;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.house-tags {
  margin-bottom: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.house-address {
  display: flex;
  align-items: center;
  color: #909399;
  font-size: 13px;
  margin-top: 12px;
}

.house-address .el-icon {
  margin-right: 5px;
  color: #1976d2;
}

.image-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: #f5f7fa;
  color: #909399;
}

.image-placeholder .el-icon {
  font-size: 32px;
  margin-bottom: 10px;
}

.load-more {
  text-align: center;
  margin: 30px 0;
}

.load-more .el-button {
  padding: 12px 30px;
  font-size: 16px;
  transition: all 0.3s;
}

.load-more .el-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(25, 118, 210, 0.15);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
  
  .search-container {
    padding: 30px 15px;
  }
  
  .search-input-container {
    flex-direction: column;
  }
  
  .search-input {
    border-radius: 8px;
    margin-bottom: 10px;
  }
  
  .search-button {
    border-radius: 8px;
    width: 100%;
  }
  
  .filter-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-label {
    margin-bottom: 10px;
    width: 100%;
  }
  
  .filter-options {
    width: 100%;
  }
}
:deep(.el-sub-menu.el-sub-menu__hide-arrow) {
  height: 50px !important;
  line-height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 !important;
}
:deep(.el-sub-menu.el-sub-menu__hide-arrow > .el-sub-menu__title) {
  height: 50px !important;
  line-height: 50px !important;
  min-height: 50px !important;
  max-height: 50px !important;
  padding: 0 12px !important;
  font-size: 16px !important;
  display: flex;
  align-items: center;
}

/*返回顶部按钮*/
.load-more {
  text-align: center;
  margin: 30px 0;
}

/* 返回顶部按钮样式 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(25, 118, 210, 0.85);
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 999;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

.back-to-top.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top:hover {
  background-color: rgba(25, 118, 210, 1);
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.back-to-top .el-icon {
  font-size: 24px;
}
</style>